// @ts-nocheck
import styles from "./index.module.less"
import { make } from "../../utils/dom"
import { uniqueId } from "@/server-lib/tools"
import { uploadFreeFileFn } from "@/utils/file"
class SwiperBox {
	static get toolbox() {
		return {
			title: "Swiper",
			icon: `<svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
        <rect x="11" y="7" width="26" height="34" fill="#2F88FF" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="4" y="11" width="7" height="26" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="37" y="11" width="7" height="26" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M22 20L28 24L22 28V20Z" fill="#43CCF8" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>`,
		}
	}

	static get isReadOnlySupported() {
		return true
	}

	constructor({ data, api, config, readOnly }) {
		this.data = {
			urls: data.urls || [],
		}

		this.api = api
		this.id = uniqueId()

		this.readOnly = readOnly

		this.isEdit = true

		this.config = config || {}

		this.wrapper = undefined
	}

	render() {
		this.wrapper = make("div", styles["cx-custom-swiper"])
		const urls = this.data.urls
		if (urls && urls.length) {
			const swiper = make("div", "swiper", { id: this.id })
			const imgBox = make("div", "swiper-imgBox")
			imgBox.style.width = urls.length * 100 + "%"
			imgBox.style.animation = `loop${urls.length} ${urls.length * 3}s linear infinite`
			for (let i = 0; i < urls.length; i++) {
				const slider = make("div", "swiper-slide")
				const img = make("img", styles.img, { src: urls[i] })
				slider.append(img)
				imgBox.append(slider)
			}

			swiper.append(imgBox)

			this.wrapper.append(swiper)
		} else {
			this.wrapper.style.backgroundColor = "#f0f0f0"
			// 创建输入框, 按钮
			const controlBox = make("div", styles.controlBox)
			const uploadBtn = make("div", styles.cardItem, { innerText: "+" })
			const saveBtn = make("div", styles.saveBtn, { innerText: "渲染" })

			controlBox.append(uploadBtn, saveBtn)
			this.wrapper.append(controlBox)

			// 当浏览按钮点击后，上传素材
			this.api.listeners.on(
				uploadBtn,
				"click",
				async () => {
					uploadFreeFileFn((error, data, upLoading) => {
						if (error) {
							console.error("上传失败:", error)
						} else {
							if (!data) return
							if (data.url) {
								this.data.urls.push(data.url)
							}
							const imgBox = make("div", styles.cardItem)
							const img = make("img", styles.img, { src: data.url })
							imgBox.append(img)
							controlBox.insertBefore(imgBox, uploadBtn)
							if (this.data.urls.length >= 3) {
								uploadBtn.remove()
							}
						}
					})
				},
				false
			)

			// 监听编辑和保存事件
			this.api.listeners.on(
				saveBtn,
				"click",
				() => {
					const curIdx = this.api.blocks.getCurrentBlockIndex()
					const curBlock = this.api.blocks.getBlockByIndex(curIdx)
					this.api.blocks.update(curBlock.id, {
						urls: this.data.urls,
					})
				},
				false
			)
		}

		return this.wrapper
	}

	save(blockContent) {
		// console.log(this.mfe.value())
		return this.data
	}
}

export default SwiperBox

